<template>
  <div id="head">
    <div class="head_content">
      <div class="logo">
       <h1 @click="goUrl()">IT人才博客论坛</h1> 
      </div>
      <div class="search">
        <el-input placeholder="请输入内容" v-model="keyName"  clearable  @change="search" @clear="search">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
      <div class="nav">
        <ul>
          <li :class="{on:isAdd}" @click="goUrl(null,'addBlog')">写博客</li>
          <li @click = "goUrl(null,'myBlog')">我的文章
          <span></span>
          </li>
        </ul>
      </div>
  </div>
   <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["keyVal"],
  name: 'Head',
  data(){
   return {
     keyName:"",
    isAdd: false,
    dialogVisible: false,
   }
 },
//  created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
 created(){
   this.keyName = this.keyVal;
   if(this.isAdd.$route.name === "addBlog"){
     this.isAdd =true;
   }
 },
 
 methods: {
    search() {
      const query = this.keyName
        ? JSON.stringify({
            keyname: this.keyName,
          })
        : null;

      this.goUrl(query, "search");
    },
    goUrl(obj, name = "home") {
      obj = typeof obj === "string" ? JSON.parse(obj) : null;
      this.$router
        .push({
          name: name,
          query: obj,
        })
        .catch(() => {});
    },
  },
}
</script>

<style scoped lang="scss">
@import "../theme/style.scss";
#head{
  width:100%;
  height:70px;
  // position: fixed;
  background:rgb(55, 56, 56);
  .head_content{
    width: 1200px;
    margin:0 auto;
    display:flex;
    >div{
      flex: 1;
      height: 70px;
      &.logo{
        h1{
          margin: 15px auto;
          cursor: pointer;
          font-size:25px;
          display: flex;
          color: #fff;
          align-items: center;
        }
       
      }
      &.search{
        display: flex;
        align-items: center;
      }
      &.nav{
        display: flex;
        align-items: center;
         justify-content: flex-end;
        ul{
          display: flex;
          color: #fff;
          list-style-type: none;
         justify-content: flex-end;
          li{
            cursor: pointer;
            margin-left:80px;
            font-size: 17px;
            &:hover{
              // text-decoration: underline;
              color: #f7afaf;
            }
          }
        }
      }
    }
  }
}
</style>
